<template>
    <el-menu
      default-active="1"
      class="sidebar-menu"
      :collapse="isCollapse"
      :unique-opened="true"
    >
      <!-- 一级菜单项 -->
      <el-sub-menu
        v-for="(menu, index) of menus"
        :key="index"
        :index="String(menu.index)"
      >
        <template #title>
            <el-icon><Home /></el-icon>
          <!-- <i :class="menu.icon"></i> -->
          <span>{{ menu.title }}</span>
        </template>
        <!-- 二级菜单项 -->
        <el-menu-item
          v-for="(subMenu, subIndex) in menu.children"
          :key="subIndex"
          :index="String(subMenu.index)"
        >
          <el-icon><User /></el-icon>
          <!--<i :class="subMenu.icon"></i>-->
          {{ subMenu.title }}
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
      
</template>
  
  <script setup>
  import { ref } from 'vue'
  
  // 模拟菜单数据
  const menus = ref([
    {
      index: '1',
      title: '首页',
      icon: 'user',
    },
    {
        index: '2',
        title: '会员管理',
        icon: '',
        children: [
            {
                index: '2-1',
                title: '会员',
                icon: '',
            }
        ]
    }
  ]);
  
  // 控制菜单折叠状态
  const isCollapse = ref(false)


  </script>
  
  <style scoped>
  .sidebar-menu {
    width: 200px;
  }
  
  /* 可以根据需要添加更多的样式 */
  </style>